<template>
	<div class="tongjis">
		<div class="tongji">
			<div class="xiaoshoutongji">
				<div>
					销售统计
				</div>
				<div>
					<picker mode="multiSelector" :range="arrDate" range-key="" @change="bindDateChange">
						<view class="uni-input">{{arrDate[0][dateIndex]}} <span class="iconfont"> &#xe60c;</span></view>
					</picker>
				</div>
			</div>
			<div class="zhuzhuangtu">
				
				
						<div @click="zong()" :class="{ 'active': is==5 }">汇总</div>
						<div @click="toaday()"  :class="{ 'active': is==1 }">今日</div>
						<div @click="yestady()"  :class="{ 'active': is==2}">昨日</div>
						<div @click="week()"  :class="{ 'active': is==3 }">七日</div>
						<div @click="mone()"  :class="{ 'active': is==4 }">30日</div>
					
				
				
			</div>
			<div>
				<div class="zongshu" >
					<div class="xian">
						<div>
							<h3>{{list.num}}</h3>
							
							<p>支付订单金额</p>
						</div>
						
					</div>
					<div class="box3">
						
					</div>
					<div class="xian">
						<div>
							<h3>{{list.sum}}</h3>
							
							<p>支付订单数量</p>
						</div>
					</div>
				</div>
			</div>
			<div class="waits">
				<div class="wait">
					<div>
						<h3>{{waitlist.fahuo}}</h3>
						发货订单<span class="iconfont">&#xe84f;</span></h3>
					</div>
				</div>
				<div class="wait">
					<div>
						<h3>{{waitlist.weiquan}}</h3>
						待发货<span class="iconfont">&#xe84f;</span></h3>
					</div>
				</div>
				<div class="wait">
					<div>
						<h3>{{waitlist.weiquan}}</h3>
						维权订单<span class="iconfont">&#xe84f;</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		
		data(){
			return {
				dateIndex: 0,
				arrDate: [
					['全部',"汇总", "今天","昨天","这周","这月"]
				],
				
				list:{sum:"88",num:"8888"},
				waitlist:{fukuan:"8",fahuo:"5",weiquan:"3"},
				two:false,
				three:false,
				four:false,
				zoon:false,
				is:1
			}
		},
		methods:{
			GOlist(x){
				var token=""
				var that=this
				wx.getStorage({
				  key: 'token',
				  success (res) {
					that.token=res.data
					// console.log(that.token)
				  }
				})
				// wx.request({
				//   url:this.$url+"/api/v1.Shop/ShopInfo",
				//   method:'GET',
				//   header: {
				//       token:that.token
				//     },
				//   data: {
				//     shop_id	:1,
				// 	select_type:x
				//   },
				//   success(res){
				// 	  console.log(res)
				//     console.log("发送成功")
				//   },
				//   fail(ref){
				// 	  console.log("发送失败")
				// 	  console.log(ref)
				//   }
				// })
			},
			bindDateChange: function(e) {
			    // console.log(e.detail.value)
			    this.dateIndex=e.detail.value[0];
				console.log(this.dateIndex)
				switch (this.dateIndex){
					case 1:
						this.zong()
						break;
					case 2:
						this.toaday()
						break;
					case 3:
						this.yestady()
						break;
					case 4:
						this.week()
						break;
					case 5:
						this.mone()
						break;
					default:
						break;
				}
			    // console.log(this.dateIndex,this.dateIndexOne)
			},
			toaday(){
				this.is=1
				this.list = {sum:"88",num:"8888"},
				this.waitlist={fukuan:"1",fahuo:"1",weiquan:"1"},
				this.one= true
				this.three = false
				this.four = false
				this.zoon=false
				var t="d"
				this.GOlist(t)
			},
			yestady(){
				this.is=2
				console.log(2)
				this.one = false
				this.list = {sum:"777",num:"7777"},
				this.waitlist={fukuan:"2",fahuo:"2",weiquan:"2"},
				this.three = false
				this.four = false
				this.zoon=false
				var t="zd"
				this.GOlist(t)
			},
			week(){
				this.is=3
				console.log(3)
				this.one = false
				this.two = false
				this.list = {sum:"333",num:"3333"},
				this.waitlist={fukuan:"3",fahuo:"3",weiquan:"3"},
				this.four = false
				this.zoon=false
				this.GOlist("w")
			},
			mone(){
				this.is=4
				console.log(4)
				this.list = {sum:"44",num:"44444"},
				this.waitlist={fukuan:"4",fahuo:"4",weiquan:"4"},
				this.one = false
				this.two = false
				this.three = false
				this.zoon=false
				this.GOlist("m")
			},
			zong(){
				this.is=5
				this.waitlist={fukuan:"5",fahuo:"5",weiquan:"5"},
				console.log(5)
				this.four = false
				this.one = false
				this.two = false
				this.three = false
				this.list={sum:"555",num:"5555"}
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
.tongjis{
	width: 100%;
	max-width: 100%;
	margin-top: 24upx;
	.iconfont {
		margin-left: 10upx;
	  font-family: "iconfont" !important;
	  font-size: 22upx;
	  font-style: normal;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	  vertical-align: middle;
	}
	.active{
		background-color:$u-type-primary;
		color: #FFFFFF;
	}
	text-align: center;
	border-top: 1px solid gainsboro;
	.tongji{
		width: 100%;
		margin: 0 auto;
		height: 468upx;
		background-color: #FFFFFF;
		.xiaoshoutongji{
			color: #999999;
			width: 640upx;
			margin: 0 auto;
			height: 100upx;
			line-height: 100upx;
			// box-sizing: border-box;
			font-size: 25upx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}
		.zhuzhuangtu{
			width: 640upx;
			margin: 0 auto;
			// border: 1px  solid  #99ccff;
			border-radius: 30upx;
			// box-sizing: border-box;
			border: 4upx  solid  $u-type-primary;
			overflow: hidden;
			font-size: 16upx;
			height: 55upx;
			line-height: 50upx;
			display: flex;
			flex-direction: row;
			div{
				flex: 1;
			}
			
			
		}
		.zongshu{
			width: 640upx;
			height: 172upx;
			display: flex;
			justify-content:space-between;
			div{
				width: 50%;
			}
			.xian{
				text-indent: 64upx;
				text-align: left;
				display: flex;
				align-self: center;
				div{
					font-size: 20upx;
					width: 100%;
					h3{
						font-size: 30upx;
						color: #333333;
					}
					p{
						color: #999999;
					}
				}
			}
			.box3{
				width:3upx;
				height: 80upx;
				background-color: #DDDDDD;
				margin-top: 45upx;
				margin-bottom: 45upx;
			}
		}
		.waits{
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			margin-bottom: 28upx;
			// background-color: red;
			.wait{
				box-sizing:border-box;
				padding: 20upx;
				text-align: left;
				box-shadow:0px 0px 5px #888888;
				font-size: 22upx;
				width: 180upx;
				height: 110upx;
				display: flex;
				div{
					align-self: center;
					h3{
						color: #ff9900;
					}
				}
			}
		}
	}
	
}
</style>
